<template>
	<view class="waterfall-item"  @touchstart="handleTouchStart" @touchend="handleTouchEnd" v-if="del">
		<view class="" v-if="params.picture" style="position: relative;" @tap="onTap(params.id)">
			<image :src="IMG_URL+firstPicture(params.picture)" mode="widthFix" @load="emitHeight" @error="emitHeight" style="border-radius: 24rpx;" >
				<view class="leixing-box">
					<text v-if="params.state == 0" class="leixing">待审核</text>
					<text v-if="params.type == 0" class="leixing">分享</text>
					<text v-if="params.type == 1" class="leixing">永久</text>
					<text v-if="params.type == 2" class="leixing">誓言</text>
					<text v-if="params.type == 3" class="leixing">宣文</text>

				</view>

			</image>
		</view>
		<view v-else-if="params.video" style="position: relative;" @tap="onTap(params.id)">
			<image :src="IMG_URL+params.video_cover" mode="widthFix" @load="emitHeight" @error="emitHeight" style="border-radius: 24rpx;">
				<view class="leixing-box">
					<text v-if="params.state == 0" class="leixing">待审核</text>
					<text v-if="params.type == 0" class="leixing">分享</text>
					<text v-if="params.type == 1" class="leixing">永久</text>
					<text v-if="params.type == 2" class="leixing">誓言</text>
					<text v-if="params.type == 3" class="leixing">宣文</text>
				</view>
			</image>
		</view>
		<view v-else style="position: relative;" @tap="onTap(params.id)">
			<image src="/static/imgs/temp.png" mode="widthFix" @load="emitHeight" @error="emitHeight" style="border-radius: 24rpx;">
				<view class="leixing-box">
					<text v-if="params.state == 0" class="leixing">待审核</text>
					<text v-if="params.type == 0" class="leixing">分享</text>
					<text v-if="params.type == 1" class="leixing">永久</text>
					<text v-if="params.type == 2" class="leixing">誓言</text>
					<text v-if="params.type == 3" class="leixing">宣文</text>
				</view>
			</image>
		</view>

		<view class="conts">
			<view class="infos">{{params.introduce}}</view>
			<view class="desc dis-flex flex-x-between">
				<view class="dis-flex flex-x-between flex-y-center">
					<image v-if="params.user.avatar" :src="IMG_URL+params.user.avatar"
						style="width:30rpx;border-radius: 50%;height: 30rpx;" />
					<image v-else src="/static/imgs/tou.png" style="width:30rpx;" mode="widthFix" />
					<view class="txts">{{params.user.username}}</view>
				</view>
				<view class="dis-flex flex-x-between flex-y-center" >
					<image v-if="params.is_like == 1" src="/static/imgs/xin1.png" style="width:30rpx;"
						mode="widthFix" @tap="cancelLikeOne(params)" />
					<image v-else src="/static/imgs/xin.png" style="width:30rpx;" mode="widthFix" @tap="likeOne(params)" />
					<view class="txts">{{formattedLikeNum(params.like_num)}}</view>
				</view>
			</view>
		</view>
		<u-action-sheet :actions="list" :show="langShow" :closeOnClickOverlay="true" :closeOnClickAction="true"
			@select="langSelect" @close="langclose"></u-action-sheet>
	</view>
</template>

<script>
	import {
		detail,
		remarkList,
		interestOne,
		like,
		cancelLike,
		collect,
		cancelCollect,
		stepArticle,
		cancelStepArticle,
		cancelInterest,
		publish
	} from '../../api/hall.js'
	import {
		delMe
	} from '../../api/my.js'
	import {
		IMG_URL,
	} from "../../config/app.js";
	import env from '@/utlis/env.js';
	export default {
		name: "helang-waterfall",
		props: {
			params: {
				type: Object,
				default () {
					return {}
				}
			},
			tag: {
				type: String | Number,
				default: ''
			},
			index: {
				type: Number,
				default: -1
			},
			longTap: {
				type: Boolean,
				defult: false
			}
		},
		data() {
			return {
				list: [{
						name: '修改',
						value: 1
					},
					{
						name: '删除',
						value: 2
					}
				],
				IMG_URL: IMG_URL,
				pressTimer: '',
				langShow: false,
				del:true
			};
		},
		created() {},
		methods: {
			//点赞
			async likeOne(params) {
				if(!params.state == 0){
					const res = await like({
						'article_id': params.id
					}).then(res => {
						// console.log(res, '点赞');
						if (res.code == 1) {
							this.params.is_like = 1
							this.params.like_num +=1
						}
								
					});
				}else{
					this.onTap(params.id)
				}
				
			},
			//取消点赞
			async cancelLikeOne(params) {
				if(!params.state == 0){
					const res = await cancelLike({
						'article_id': params.id
					}).then(res => {
						// console.log(res, '取消点赞');
						if (res.code == 1) {
							this.params.is_like = 0
							this.params.like_num -=1
						}
								
					});
				}else{
					this.onTap(params.id)
				}
				
			},
			async delMy(e) {
				const res = await delMe({
					'id':this.params.id
				}).then(res=>{
					this.del = false
					uni.showToast({
						'duration': 1500,
						'icon': 'none',
						'title': res.msg
					})
				})
			},
			langclose() {
				setTimeout(() => {
					this.langShow = false
				}, 200)
			},
			langSelect(e) {
				if(e.value == 2){
					this.delMy()
					console.log('删除',this.params.id);
				}
				if(e.value == 1){
					console.log('修改', '-----------');
					let data = JSON.stringify(this.params)
					uni.navigateTo({
						url:"/pages/index/addImageTxt2?data="+data
					})
				}
			},
			handleTouchStart(event) {
				this.pressTimer = setTimeout(() => {
					this.handleLongPress();
				}, 800);
			},
			handleTouchEnd(event) {
				clearTimeout(this.pressTimer);
				event.stopPropagation();
			},
			handleLongPress() {
				if(this.longTap){
					console.log('长摁事件');
					if (!this.params.state == 0) {
						this.list = [{
							name: '删除',
							value: 2
						}]
					} else {
						this.list = [{
								name: '修改',
								value: 1
							},
							{
								name: '删除',
								value: 2
							}
						]
					}
					this.langShow = true
				}
				
			},
			firstPicture(picture) {
				const pictureArray = picture.split(',');
				return pictureArray.length > 0 ? pictureArray[0] : null;
			},
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e) {
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height", height, this.$props.tag);
				}).exec();
			},
			onTap(article_id) {

				if (!this.langShow) {
					console.log('点击---------');
					if (this.params.state == 0) {
						uni.showToast({
							'duration': 1500,
							'icon': 'none',
							'title': '请等待审核'
						})
					} else {

						this.$emit("click", this.$props.index, this.$props.tag);
					}
				}


			},
			formattedLikeNum(likeNum) {
				if (likeNum >= 10000 && likeNum < 1000000) {
					// 大于等于1万小于100万，显示 x.x 万
					return (likeNum / 10000).toFixed(1) + 'w';
				} else {
					// 其他情况直接显示数字
					return likeNum.toString();
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall-item {
		padding: 16rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		border-radius: 24rpx;
		border: 1px solid rgba(0, 0, 0, 0.13);

		image {
			display: block;
			width: 100%;
			// 默认设置一个图片的大约值
			height: 350rpx;
		}

		.conts {
			.infos {
				font-weight: bold;
				font-size: 28rpx;
				color: $uni-text-color;
				line-height: 40rpx;
				margin: 26rpx 0 22rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				/* 设置要显示的行数 */
				-webkit-line-clamp: 1;
				/* 这里设置为 2 表示最多显示两行 */
			}

			.txts {
				font-size: 26rpx;
				color: $uni-text-color-primary;
				margin-left: 10rpx;
			}
		}

		.leixing {
			font-size: 20rpx;
			color: #fff;
			background-color: #666;
			padding: 2rpx 10rpx;
			border-radius: 8rpx;
			margin-right: 5rpx;
		}

		.leixing-box {
			position: absolute;
			bottom: 16rpx;
			left: 10rpx;
		}
	}
</style>